<template>
	<div class="rightbox">
		<div class="global-visualization-box-head">
			{{ title }}
			<div class="footer-pan"></div>
		</div>
		<!--<div class="hengxian henxian2"></div>-->
		<!-- 内容部分 -->
		<div class="zlBox">
			<!-- <v-chart :option="option" :autoResize="true" class="shuiqiuchart"></v-chart> -->
			<!-- style="width: 120px;box-sizing: border-box;" -->
			<!-- <div id="econtainer" class="liquidfill-container shuiqiuchart" style="width: 120px;box-sizing: border-box;"> -->

			</div>
			<div class="right">
				<div class="jian">
					<div class="j">
						<img :src="comstatic+'/reddImg/zongliang.png'" alt="" />
						<div class="content">
							<span class="text">减碳量</span>
							<span class="unit">(吨)</span>
						</div>
					</div>
					<div class="num">{{ subCarbon }}</div>
				</div>
				<div class="xian">
					<div class="circle"></div>
					<div class="circle"></div>
				</div>
				<div class="zong">
					<div class="z">
						<img :src="comstatic+'/reddImg/jianliang.png'" alt="" />
						<div class="content">
							<span class="text">碳排放总量</span>
							<span class="unit">(吨)</span>
						</div>
					</div>
					<div class="num">{{ totalCarbon }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import 'echarts-liquidfill'
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionBottomLeftAValue,
		optionBottomLeftBValue,
		optionBottomCenterValue,
		optionBottomRightValue
	} from "@/common/echart_data.js";
	import request from '@/common/request.js';
	import $config from '@/common/config.js';
	export default {
		data() {
			return {
				title: '光伏碳中和指数',
				totalCarbon: 10,
				subCarbon: 20,
				radio: 0,
				comstatic: $config.comstatic
			}
		},
		components: {
			UniEcharts
		},
		created() {
			this.loadData()
		},
		methods: {
			loadData() {
				request.get('/jeecgboot/statistic/pv/data6?projectId=' + $config.pcode).then(res => {
					console.log(res, '-----res---------33---')
					this.subCarbon = res.result.sum_carbon_sub
					this.totalCarbon = res.result.sum_carbon_out
					this.ratio = res.result.ratio
					console.log(res.result.ratio, '----res.result.ratio-----')
					console.log(this.radio, '----this.radio-----')
					optionBottomCenterValue.series[0].data = [this.ratio, this.ratio, this.ratio]
					let chartDom = document.getElementById('econtainer');
					let echartInstance = echarts.init(chartDom);
					console.log(optionBottomCenterValue, '----optionBottomCenterValue---')
					echartInstance.setOption(optionBottomCenterValue);

				})
			}
		},
		mounted() {
			this.$nextTick(() => {

			});
		}

	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.rightbox {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.3);
		background: linear-gradient(360deg, #0c1117 0%, rgba(7, 19, 36, 0) 100%);
		position: relative;
		
		.global-visualization-box-head{
			margin:14px 0 0 0;
		}

		&::before {
			position: absolute;
			top: -2px;
			left: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-left: 3px solid #76828f;
			content: '';
		}

		&::after {
			position: absolute;
			top: -2px;
			right: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-right: 3px solid #76828f;
			content: '';
		}

		.footer-pan {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			&::before {
				position: absolute;
				bottom: -2px;
				left: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-left: 3px solid #76828f;
				content: '';
			}

			&::after {
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-right: 3px solid #76828f;
				content: '';
			}
		}

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px;
			color: #fff;
			font-weight: 600;
			width: 90%;
			height: 50px;
			background: linear-gradient(180deg, rgba(82, 133, 172, 0.6) 0%, rgba(61, 124, 218, 0) 100%);
			letter-spacing: 3px;
			border: 1px solid rgba(255, 255, 255, 0.2);
		}
	}
</style>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.zlBox {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		position: relative;
		// background-color: aquamarine;

		.shuiqiuchart {
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 48%;
			flex: 1;
			height: 100%;
		}

		.right {
			height: 100%;
			// flex: 1;
			width: 58%;
			display: flex;
			// justify-content: space-around;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			// background-color: pink;

			.jian {
				// width: 83%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				// background-color: pink;
				padding-right: 20px;
				padding-left: 20px;

				.j {
					height: 100%;
					width: 40%;
					display: flex;
					justify-content: space-around;

					.content {
						display: flex;
						align-items: flex-start;
						justify-content: center;
						flex-direction: column;

						.text {
							color: #fff;
							width: 85px;
							// font-size: 16px;
							// font-size: 0.8vw;
							font-size: 1.8vh;
						}

						.unit {
							color: #626770;
							// font-size: 0.8vw;
							font-size: 1.8vh;
						}
					}

					img {
						// width: 50px;
						// height: 50px;
						width: 5vh;
						height: 5vh;
					}
				}

				.num {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #93d8ff;
					// font-size: 34px;
					// font-size: 32px;
					// font-size: 1.6vw;
					font-size: 3.2vh;
					font-weight: 400;
					font-family: 'pieFont';
				}
			}

			.xian {
				position: absolute;
				background: url('http://portal.xumengte.com/reddImg/shuxian.png') no-repeat;
				left: 44.8%;
				// left: 30.8%;
				width: 50%;
				// width: 68%;
				height: 8px;
				background-size: contain;
			}

			.zong {
				// width: 83%;
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				padding-right: 10px;
				padding-left: 20px;


				.z {
					height: 100%;
					width: 50%;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.content {
						display: flex;
						align-items: flex-start;
						justify-content: center;
						flex-direction: column;

						.text {
							color: #fff;
							width: 95px;
							// font-size: 0.8vw;
							font-size: 1.8vh;
						}

						.unit {
							color: #626770;
							// font-size: 0.8vw;
							font-size: 1.8vh;
						}
					}

					img {
						// width: 50px;
						// height: 50px;
						width: 5vh;
						height: 5vh;
					}
				}

				.num {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #93d8ff;
					// font-size: 32px;
					// font-size: 1.6vw;
					font-size: 3.2vh;
					font-family: 'pieFont';

				}
			}
		}
	}
</style>
